<template>
	<div class="main" @click="$router.push('/special-brand')">
		<div class="main-bg">
			<div class="brand-title">
				<svg-icon class="icon" iconName="goodbrand"></svg-icon>
				品牌优选
			</div>
			<div class="goods">
				<div class="goods-item" v-for="(item, index) in list" :key="index">
					<img :src="item.pic" alt="" />
					<div class="goods-item-title">
						{{ item.title }}
					</div>
					<div>
						<span class="price-tips">到手价</span> <span class="price">¥{{ item.endPrice }}</span>
					</div>
				</div>
				<Empty v-if="Empty" emptyText="暂无商品" offsetTop="0"></Empty>
			</div>
		</div>
	</div>
</template>
<script>
import { Empty } from '@/components';
export default {
	data() {
		return {
			list: [],
			Empty: false
		};
	},
	components: {
		Empty
	},
	created() {
		this.fatchData();
	},
	methods: {
		fatchData() {
			this.$service.shopping.specialClassify
				.list({
					specialType: 2
				})
				.then(res => {
					this.$service.shopping.specialGoods
						.page({
							page: 1,
							size: 3,
							specialType: 2,
							order: 'ysqLevel',
							sort: 'desc',
							app: 'yzf'
						})
						.then(res => {
							this.list = res.list;
							if (this.list.length === 0) {
								this.Empty = true;
							}
						});
				});
		}
	}
};
</script>
<style lang="scss" scoped>
.main {
	width: 710px;
	height: 408px;
	background: rgba(255, 255, 255, 1);
	border-radius: 16px;
	font-size: 24px;
	margin: 0 auto;
	// padding: 18px;
	margin-top: 20px;
	// position: relative;
	.main-bg {
		background: url('../../../assets/images/index/goodbrand.png');
		width: 100%;
		height: 220px;
		background-size: 100%;
		background-repeat: no-repeat;
		// position: absolute;
		// top: 0;
		// left: 0;
		.brand-title {
			padding-left: 20px;
			padding-top: 20px;
			.icon {
				font-size: 40px;
			}
			font-size: 32px;
			font-weight: 500;
			line-height: 44px;
			color: rgba(255, 255, 255, 1);
		}
		.goods {
			@include flexBox(space-between, center);
			margin-top: 30px;
			// position: relative;
			// z-index: 1;
			width: 100%;
			padding: 0px 30px 22px;
			.goods-item {
				width: 200px;

				img {
					// width: 200px;
					// height: 200px;
					width: 100%;
					border-radius: 16px;
				}
				.goods-item-title {
					@include ellipsis();
					font-size: 24px;
					color: rgba(23, 23, 23, 1);
					font-weight: 400;
				}
				.price-tips {
					width: 66px;
					height: 22px;
					line-height: 22px;
					background: linear-gradient(85deg, rgba(247, 1, 20, 1) 0%, rgba(255, 126, 126, 1) 100%);
					border-radius: 14px 2px 14px 14px;
					color: #ffffff;
					font-weight: 500;
					font-size: 16px;
					padding: 0 10px;
				}
				.price {
					font-size: 28px;
					font-weight: 500;
					line-height: 40px;
					color: rgba(247, 1, 20, 1);
					margin-left: 8px;
				}
			}
		}
	}
}

::v-deep .empty-box {
	position: relative;
	top: -30px;
}
</style>
